<div class="layui-fluid layui-anim website-anim-up" id="website-class-apply-add" lay-title="年度课题新增">
    <div class="layui-row layui-col-space8 website-container">
        <div class="layui-col-md10 layui-col-sm10 layui-col-xs10">
            <form class="layui-form" lay-filter="class-apply-add-form" id="class-apply-add-form">
                <div class="layui-card" id="client-user-info">
                    <div class="layui-card-header">基本情况</div>
                    <div class="layui-card-body layui-form-item">
                        <div class="layui-row">
                            <div class="layui-form-item website-hide">
                                <label class="layui-form-label">leaderid：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="leader.applicantId"
                                           data-th-value="${leader.applicantId}">
                                </div>
                            </div>
                            <!-- 基本信息-->
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label website-form-item-require">课题名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" lay-verify="required" autocomplete="off"
                                           class="layui-input" maxlength="50">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6 ">
                                <label id="levelTypeCodeLabel"
                                       class="layui-form-label website-form-item-require">申报级别</label>
                                <div class="layui-input-inline">
                                    <select id="firstLevelTypeCode" name="firstLevelTypeCode" lay-verify="required"
                                            lay-filter="firstLevelTypeCode">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                                <label></label>
                                <div class="layui-input-inline">
                                    <select name="levelTypeCode" lay-verify="required" id="levelTypeCode">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="layui-row">
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label website-form-item-require">申报年份</label>
                                <div class="layui-input-block">
                                    <input type="text" lay-verify="required" id="applyYear" name="year"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6 ">
                                <label class="layui-form-label website-form-item-require">选题名称</label>
                                <div class="layui-input-block">
                                    <select name="topicId" lay-verify="required" id="topicId" lay-filter="topicId">
                                        <option value="">请选择</option>
                                        <option
                                                th:each="item : ${topics}"
                                                th:value="${item.topicId}" th:text="${item.topicName}">
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label website-form-item-require">成果形式</label>
                                <div class="layui-input-block">
                                    <select name="achievementFormTypeCode"
                                            lay-verify="required"
                                            xm-select-direction="down"
                                            xm-select="achievementFormTypeCode"
                                            xm-select-skin="default">
                                        <option value="">请选择</option>
                                        <option
                                                th:each="item : ${achievementForm}"
                                                th:value="${item.code}" th:text="${item.name}">
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6 ">
                                <label class="layui-form-label website-form-item-require">成果字数</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="achievementFormSize" autocomplete="off"
                                           lay-verify="required" maxlength="50"
                                           class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">万字</div>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label website-form-item-require">主持人姓名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="leader.name" maxlength="50" lay-verify="required"
                                           autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6 ">
                                <label class="layui-form-label website-form-item-require">学科分类</label>
                                <div class="layui-input-block">
                                    <select name="subjectTypeCode" lay-verify="required" maxlength="50"
                                            lay-filter="subjectTypeCode">
                                        <option value="">请选择</option>
                                        <option
                                                th:each="item : ${subjectTypeCode}"
                                                th:value="${item.code}" th:text="${item.name}">
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label website-form-item-require">行政职务</label>
                                <div class="layui-input-block">
                                    <select name="leader.positionTypeCode" lay-verify="required"
                                            lay-filter="positionTypeCode">
                                        <option value="">请选择</option>
                                        <option
                                                th:each="item : ${positionTypeCode}"
                                                th:value="${item.code}" th:text="${item.name}">
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6 ">
                                <label class="layui-form-label website-form-item-require">职称级别</label>
                                <div class="layui-input-block">
                                    <select name="leader.titleTypeCode" lay-verify="required"
                                            lay-filter="titleTypeCode">
                                        <option value="">请选择</option>
                                        <option
                                                th:each="item : ${titleTypeCode}"
                                                th:value="${item.code}" th:text="${item.name}">
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label website-form-item-require">职称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="leader.professionCode" maxlength="50" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6 ">
                                <label class="layui-form-label website-form-item-require">工作单位</label>
                                <div class="layui-input-block">
                                    <input type="text" name="leader.company" maxlength="50" lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label ">人事关系所在地</label>
                                <div class="layui-input-block">
                                    <select name="leader.personnelAreaTypeCode" lay-filter="personnelAreaTypeCode">
                                        <option value="">请选择</option>
                                        <option
                                                th:each="item : ${personnelAreaType}"
                                                th:value="${item.code}" th:text="${item.name}">
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <label class="layui-form-label website-form-item-require">出生日期</label>
                                <div class="layui-input-block">
                                    <input type="text" lay-verify="required" id="birthday" name="leader.birthday"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-inline layui-col-xs5 layui-col-sm5 layui-col-md12">
                                <label class="layui-form-label">主要观点</label>
                                <div class="layui-input-block">
                                <textarea class="layui-textarea" name="mainPoint" maxlength="500"
                                          placeholder="请输入内容，限制 500 字"
                                          autocomplete="off"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card-footer">
                    <button class="layui-btn" lay-submit="" lay-filter="class-apply-add-form-submit"
                            id="submit">保存
                    </button>
                    <button class="layui-btn" id="reset">返回</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--成员表-->
<!--成员表操作栏-->
<script type="text/html" id="member-option">
    <a lay-event="edit" class="website-blue">修改</a>
    <a lay-event="del" class="website-red">删除</a>
</script>
<!--主持人表-->
<!--主持人表操作栏-->
<script type="text/html" id="project-option">
    <a lay-event="edit" class="website-blue">修改</a>
    <a lay-event="del" class="website-red">删除</a>
</script>
<script type="text/html" id="sex-type">
    {{#
    let dict=layui.dict.getByCode(d.sexTypeCode);
    }}
    {{#  if(dict){ }}
    <span>{{ dict.name }}</span>
    {{#  } }}
</script>
<script type="text/html" id="identity-type">
    {{#
    let dict=layui.dict.getByCode(d.identityTypeCode);
    }}
    {{#  if(dict){ }}
    <span>{{ dict.name }}</span>
    {{#  } }}
</script>
<script type="text/html" id="position-type">
    {{#
    let dict=layui.dict.getByCode(d.positionTypeCode);
    }}
    {{#  if(dict){ }}
    <span>{{ dict.name }}</span>
    {{#  } }}
</script>
<script type="text/html" id="title-type">
    {{#
    let dict=layui.dict.getByCode(d.titleTypeCode);
    }}
    {{#  if(dict){ }}
    <span>{{ dict.name }}</span>
    {{#  } }}
</script>
<script type="text/html" id="degree-type">
    {{#
    let dict=layui.dict.getByCode(d.degreeTypeCode);
    }}
    {{#  if(dict){ }}
    <span>{{ dict.name }}</span>
    {{#  } }}
</script>


<script data-th-inline="javascript" type="text/javascript">
    layui.use(['jquery', 'laydate', 'form', 'table', 'website', 'dict', 'formSelects', 'validate', 'clientModules'], function () {
        let $ = layui.$,
            laydate = layui.laydate,
            website = layui.website,
            form = layui.form,
            formSelects = layui.formSelects,
            validate = layui.validate,
            table = layui.table,
            client = layui.clientModules,

            $view = $('#website-class-apply-add'),
            $form = $('#class-apply-add-form'),
            $moreAddClass = $('.more-add'),
            $reset = $('#reset'),
            $topicId = $('#topicId'),

            leader = [[${leader}]],
            classType = [[${classType}]],
            groups = [[${level}]];

        $moreAddClass.hide()


        // 重新渲染 form否则不会显示下拉框
        form.render();
        formSelects.render();
        form.verify(validate);


        //初始化年份的搜索框
        laydate.render({
            elem: '#applyYear', //指定元素
            type: 'year',
            trigger: 'click',
            done: function (value, date, endDate) {
                date.topicClassifyCode = classType
                website.get(ctx + 'topics/declare', date, function (data) {
                    // 清空下拉框
                    $topicId.empty()
                    let result = data.data,
                        html = '<option value="">请选择</option>\n';
                    $.each(result, function (i, item) {
                        html += '<option value="' + item.topicId + '">' + item.topicName + '</option>\n'
                    })
                    $topicId.append(html);
                    //从新刷新了一下下拉框
                    form.render('select');
                });
                let config = layui.dict.getBusinessType(date.year)
                if (!config.isTopicLev) {
                    client.removeVerify([Label = $("#levelTypeCodeLabel")],
                        [levelTypeCode = $("#levelTypeCode")[0], firstLevelTypeCodeBox = $("#firstLevelTypeCode")[0]])
                }
            }
        });

        laydate.render({
            //
            elem: '#birthday', //指定元素
            type: 'date',
            max: 0 //7天后
        })


        //    保存表单
        form.on('submit(class-apply-add-form-submit)', function () {
            // 1. 当前页表单
            let temp = $form.serializeArray(),
                formData = website.serializeObject(temp);
            let params = JSON.stringify(formData)
            website.ajaxPost(ctx + 'declareTopic', params, function () {
                //  关闭当前页面
                $('#website-home').find('#query').click();
                let currentUrl = window.location.hash.replace('#', '');
                website.view.tab.del(currentUrl);
                window.location.reload();
            });
            return false;
        });


        initExpertValue()

        form.on('select(firstLevelTypeCode)', function (data) {
            let tmp = data.value;
            $("#levelTypeCode").empty();
            $.each(groups, function (k, v) {
                if (v.type.code == tmp) {
                    if (v.course.length != 0) {
                        $.each(v.course, function (key, value) {
                            $("#levelTypeCode").append("<option value='" + value.code + "'>" + value.name + "</option>");
                        });
                    } else {
                        $("#levelTypeCode").append("<option value=''>" + '无内容' + "</option>");
                    }

                }
            });
            let defulValue = $("#levelTypeCode").val();
            if (defulValue == '') {
                $("#levelTypeValue").val(tmp);
            } else {
                $("#levelTypeValue").val(defulValue);
            }
            form.render();
        })


        function initExpertValue() {
            $.each(groups, function (k, v) {
                $("#firstLevelTypeCode").append("<option value='" + v.type.code + "'>" + v.type.name + "</option>");
            });

            form.val("class-apply-add-form", {
                "leader.name": leader.name,
                "leader.positionTypeCode": leader.positionTypeCode,
                "leader.titleTypeCode": leader.titleTypeCode,
                "leader.sexTypeCode": leader.sexTypeCode,
                "leader.nationTypeCode": leader.nationTypeCode,
                "leader.politicalTypeCode": leader.politicalTypeCode,
                "leader.birthday": leader.birthday,
                "leader.personnelAreaTypeCode": leader.personnelAreaTypeCode,
                "leader.degreeTypeCode": leader.degreeTypeCode,
                "leader.tutorTypeCode": leader.tutorTypeCode,
                "leader.language": leader.language,
                "leader.email": leader.email,
                "leader.company": leader.company,
                "leader.address": leader.address,
                "leader.postCode": leader.postCode,
                "leader.telephone": leader.telephone,
                "leader.mobile": leader.mobile,
                "leader.professionCode": leader.professionCode
            });

        }

        $reset.on('click', function () {
            //  关闭当前页面
            $('#website-home').find('#query-entrust').click();
            let currentUrl = window.location.hash.replace('#', '');
            website.view.tab.del(currentUrl);
            window.location.reload();
        })

    });
</script>